<template>
  <div class="information">
    <!-- 头部 -->
    <van-nav-bar title="我的消息">
      <template #left>
        <van-icon @click="$router.push('home/my')" name="arrow-left" />
      </template>
      <template #right>
        <span @click="entire">全部已读</span>
      </template>
    </van-nav-bar>
    <!-- 内容 -->
    <van-cell-group class="circles">
      <van-cell v-for="(item, index) in list" :key="index">
        <template #title>
          <span>{{ item.content }}</span>
        </template>
        <template #right-icon>
          <div class="circle" v-show="item.isRead"></div>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 导入接口
import { messages, read } from '@/api/my.js'
import { Toast } from 'vant'
export default {
  created () {
    this.messaGes()
  },
  data () {
    return {
      list: [],
      isRead: false,
      ids: []
    }
  },
  methods: {
    // 获取当前的信息
    async messaGes () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 20000
      })
      var res = await messages()
      this.list = res.data
      // 将服务器的数据遍历当前id
      this.ids = res.data.map(item => item.id)
      Toast.success('加载成功')
    },
    async entire () {
      var id = this.list
        .map(item => {
          if (item.isRead) {
            return item.id
          }
        })
        .filter(item => {
          return item
        })
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 20000
      })
      await read({ ids: id })
      this.$router.push('/home/my')
      Toast.success('修改成功')
    }
  }
}
</script>

<style lang="less" scoped>
.information {
  /deep/.van-nav-bar__title {
    font-size: 16px;
    color: #fff;
  }
  /deep/.van-icon-arrow-left::before {
    color: #fff;
    font-size: 20px;
  }
  /deep/.van-nav-bar {
    background-color: #ca0131;
  }
  /deep/.van-nav-bar__right {
    color: #fff;
  }
  /deep/.iconbtn_nav_back:before {
    font-size: 40px;
    margin-left: -15px;
  }
  /deep/.van-cell-group {
    padding: 18px 11px;
  }
  /deep/.van-cell--clickable {
    height: 55px;
    padding: 10px 0;
    align-items: center;
    border-radius: 0.21333rem;
  }
  /deep/.van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 18px;
    overflow: hidden;
    color: #323233;
    font-size: 0.37333rem;
    line-height: 0.64rem;
    background-color: #fff;
  }
  .circles {
    position: relative;
    .circle {
      position: absolute;
      top: 17px;
      right: 40px;
      width: 10px;
      height: 10px;
      background-color: #ff4949;
      border-radius: 50%;
    }
  }
}
</style>
